import React, {useEffect, useState} from 'react';
import {Table, TreeSelect,Card} from "antd";
import {useParams} from "react-router-dom";
import {findScheduleList, getDepartmentByHoscode, getScheduleRule} from "@/api/hosp";
const {TreeNode} = TreeSelect;
function Index() {
    const {hoscode} = useParams();
    type TTreeNode = typeof TreeNode;
    // 用于保存科室列表的状态
    const [departmentList,setDepartmentList] = useState([]);
    // 用于保存科室排班规则列表
    const [bookingScheduleList,setBookingScheduleList] = useState([]);
    // 保存排班详情
    const [scheduleList,setScheduleList] = useState([]);
    // 用于保存页码信息
    const [pageInfo,setPageInfo] = useState({
        current:1,
        pageSize:4,
        total:1
    })
    const getScheduleRuleAsync = async function(current:number,depcode:string){
        const result = await getScheduleRule(current,pageInfo.pageSize,hoscode as string,depcode);
        console.log(result);
        setBookingScheduleList(result.data.bookingScheduleList);
        setPageInfo({
            ...pageInfo,
            current,
            total:result.data.total
        })
    }
    let [depcode,setDepcode] = useState("");
    let [key,setKey] = useState("-1");
    useEffect(()=>{
        getDepartmentByHoscode(hoscode as string).then(value=>{
            console.log(value);
            setDepartmentList(value.data);
        })
    },[]);
    return (
        <div id={"content"}>
            <TreeSelect
                showSearch
                style={{ width: '100%',marginBottom:"16px" }}
                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                // filterTreeNode={(inputValue: string, treeNode: TTreeNode)=>{
                //     // console.log(inputValue);
                //     return false;
                // }}
                filterTreeNode = {(inputValue:string,treeNode:any)=>{
                    console.log(inputValue,treeNode);
                    return treeNode.title.includes(inputValue);
                }}
                placeholder="请选择科室"
                allowClear
                treeDefaultExpandAll={false}
                onChange={async (code)=>{
                    setDepcode(code);
                    getScheduleRuleAsync(1,code);
                }}
            >
                {
                    departmentList.map((item:any)=>(
                        <TreeNode selectable={false} key={item.depcode} value={item.depcode} title={item.depname}>
                            {
                                item.children.map((item:any)=>(
                                    <TreeNode key={item.depcode} value={item.depcode} title={item.depname}></TreeNode>
                                ))
                            }
                        </TreeNode>
                    ))
                }
                {/*<TreeNode value="parent 1" title="parent 1">*/}
                {/*    <TreeNode value="parent 1-0" title="parent 1-0">*/}
                {/*        <TreeNode value="leaf1" title="leaf1" />*/}
                {/*        <TreeNode value="leaf2" title="leaf2" />*/}
                {/*    </TreeNode>*/}
                {/*    <TreeNode value="parent 1-1" title="parent 1-1">*/}
                {/*        <TreeNode value="leaf3" title={<b style={{ color: '#08c' }}>leaf3</b>} />*/}
                {/*    </TreeNode>*/}
                {/*</TreeNode>*/}
            </TreeSelect>
            <Table
                bordered={true}
                expandable={{
                    async onExpand(expanded, record:any){
                        if(expanded){
                            setKey(record.workDate);
                            const result = await findScheduleList(hoscode as string,depcode,record.workDate);
                            console.log(result);
                            setScheduleList(result.data);
                        }else{
                            setKey("-1");
                        }
                        console.log(expanded);
                    },
                    expandedRowKeys:[key],
                    expandedRowRender(record:any){
                        return (
                            <Card>
                                <Table
                                    bordered={true}
                                    pagination={false}
                                    columns={[
                                        {
                                            title:"职称",
                                            align:"center",
                                            dataIndex:"title"
                                        }, {
                                            title:"号源时间",
                                            align:"center",
                                            dataIndex:"workDate"
                                        }
                                        , {
                                            title:"预约总数",
                                            align:"center",
                                            dataIndex:"reservedNumber"
                                        },
                                        {
                                            title:"剩余预约数",
                                            align:"center",
                                            dataIndex:"availableNumber"
                                        },
                                        {
                                            title:"挂号费",
                                            align:"center",
                                            dataIndex:"amount"
                                        },
                                        {
                                            title:"擅长技能",
                                            align:"center",
                                            dataIndex:"skill"
                                        }

                                    ]}
                                    dataSource={scheduleList}
                                />
                            </Card>

                        )
                    }
                }}
                rowKey={"workDate"}
                pagination={{
                    ...pageInfo,
                    onChange(page){
                        getScheduleRuleAsync(page,depcode);
                    }
                }}
                columns={[
                    {
                        title:"序号",
                        align:"center",
                        render(value,rows,index){
                            return (pageInfo.current-1)*pageInfo.pageSize+index+1;
                        }
                    },{
                        title:"医师数量",
                        align:"center",
                        dataIndex:"docCount"
                    },{
                        title:"号源时间",
                        align:"center",
                        render(rows){
                            return rows.workDate+"("+rows.dayOfWeek+")"
                        }
                    },{
                        title:"预约总数",
                        align:"center",
                        dataIndex:"reservedNumber"
                    },{
                        title:"剩余预约数",
                        align:"center",
                        dataIndex:"availableNumber"
                    }
                ]}
                dataSource={bookingScheduleList}
            />
        </div>
    );
}

export default Index;